<template>
  <c-alert v-if="noticeInfo.isShow" @click="goNotice(noticeInfo.data.id)" class="alert-float" title="通知公告" type="info"
    :description="noticeInfo.data.title" show-icon />
</template>

<script>
import CAlert from "@/components/CAlert"
import { queryNotice } from "@/api/notice/notice"
export default {
  components: { CAlert },
  data() {
    return {
      noticeInfo: {}
    }
  },
  created() {
    this.getQueryNotice();
  },
  methods: {
    goNotice(id) {
      this.$router.push(`/notice/noticeDetail/` + id);
    },
    getQueryNotice() {
      queryNotice().then(res => {
        this.noticeInfo = res.data
      })
    }
  }
}
</script>

<style lang="scss">
.alert-float {
  z-index: 100;
  position: fixed;
  right: 40px;
  bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 330px;
  padding: 14px 26px 14px 13px;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #EBEEF5;
  position: fixed;
  background-color: #FFF;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  -webkit-transition: opacity .3s, left .3s, right .3s, top .4s, bottom .3s, -webkit-transform .3s;
  transition: opacity .3s, left .3s, right .3s, top .4s, bottom .3s, -webkit-transform .3s;
  transition: opacity .3s, transform .3s, left .3s, right .3s, top .4s, bottom .3s;
  transition: opacity .3s, transform .3s, left .3s, right .3s, top .4s, bottom .3s, -webkit-transform .3s;
  overflow: hidden;
  cursor: pointer;

  &:hover {
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
  }
}
</style>